<template>
  <div class="login">
    <section>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm">

        <el-form-item label="姓&nbsp;&nbsp;&nbsp;名" prop="userName">
          <el-input v-model="ruleForm.userName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="pass">
          <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />

        </el-form-item>
        <el-form-item label="验证码" prop="yzm">
          <el-input v-model.number="ruleForm.yzm" />
          <div class="yzm">
            <yzmVue @getYzm="getYzm"></yzmVue>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, ElMessage, ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
import yzmVue from './yzm.vue'
import { useRouter } from 'vue-router'
import { CloseBold } from '@element-plus/icons-vue';
import { useStore } from 'vuex'
import { isRuleRouter } from '../util/isRlueRouter'
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const store = useStore()

const checkUserName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('用户名不能为空'))
  } else {
    callback()
  }

}

const checkPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}
const checkYzm = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('验证码不能为空'))
  } else {
    if (value != numberYzm.value) {
      callback(new Error('验证码输入错误'))

    } else {
      callback()
    }

  }
}

const ruleForm = reactive({
  userName: 'admin',
  pass: '123456',
  yzm: '',
})

const rules = reactive({
  pass: [{ validator: checkPass, trigger: 'blur' }],
  yzm: [{ validator: checkYzm, trigger: 'blur' }],
  userName: [{ validator: checkUserName, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, arg) => {
    if (valid) {
      let { userName, pass } = ruleForm

      if (userName == 'admin' && pass == '123456') {
        publicLoginFn(userName, 1)
      } else if (userName == 'p' && pass == '123456') {
        publicLoginFn(userName, 2)
      } else {
        ElMessage.success("登陆失败")
      }
    } else {
      ElMessage.error("请填写完整信息")
      return false
    }
  })
}
//清除方法
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const numberYzm = ref()
// 获取验证码
const getYzm = (e: any) => {
  numberYzm.value = e
}

const publicLoginFn = (userName: string, rule: number) => {
  ElMessage.success("登陆成功")
  sessionStorage.setItem("token", JSON.stringify({ user: userName, rule:rule }))
  // store.dispatch("changeRuleRouter",isRuleRouter(rule))
  store.dispatch("changeRuleSign", rule)
  store.dispatch("changDefaultActive", `/home`)
  //获取权限判断路由
  router.push({ path: '/' })

}
</script>

<style lang='less'>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  section {
    width: 100%;

    /*须要在外成定义宽度不然会出现抖动显现*/
    .demo-ruleForm {
      width: 80%;

      .yzm {
        width: 50%;
        padding-left: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

}
</style>